<template>
  <div>
    <tableComp
      :selectMap="selectMap"
      @getList="getList"
      :total="total"
      @addFormOk="addFormOk"
      ref="tableComp"
      :labelWidth="120"
      @changeSelect="changeSelect"
      :tableWidth="100"
      :tableData="tableData"
      :column="column"
    >
      <template slot="product_img" slot-scope="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.product_img"
          :fit="fit"
        ></el-image>
      </template>
      <template slot="category_id" slot-scope="scope">
        {{ scope.row.name }}
      </template>
      <template slot="keyword_id" slot-scope="scope">
        {{ getCategoryName(scope.row.category_name) }}
      </template>
      <template slot="poster_img" slot-scope="scope">
        <el-image
          style="width: 100px"
          :src="scope.row.poster_img"
          :fit="fit"
        ></el-image>
      </template>
      <template slot="operate" slot-scope="scope">
        <el-button-group>
          <el-button
            :type="scope.row.status == 1 ? 'danger' : 'success'"
            @click="updateStatus(scope.row)"
            >{{ scope.row.status == 1 ? "下架" : "上架" }}</el-button
          >
          <el-button type="primary" @click="beforeUpdate(scope.row)"
            >修改</el-button
          >
          <el-button @click="removeProduct(scope.row)">删除</el-button>
        </el-button-group>
      </template>
    </tableComp>
  </div>
</template>

<script>
import {
  productList,
  selectCategoryId,
  updateProduct,
  delProduct,
  selectCategoryParents,
  statusPrduct,
} from "@/api/product";
import customPage from "@/components/customPage";
export default {
  components: { customPage },
  props: ["shopname"],
  data() {
    return {
      tableData: [],
      total: 0,
      selectMap: {
        keyword: [],
      },
      column: [
        {
          label: "产品名称",
          fixed: true,
          add: {
            type: "input",
          },
          search: {
            type: "input",
          },
          prop: "product_name",
        },
        {
          label: "创建时间",
          prop: "create_time",
        },
        {
          label: "结算方式",
          add: {
            type: "input",
          },
          search: {
            type: "input",
          },
          prop: "profit_data",
        },

        {
          label: "引流费用",
          add: {
            type: "input",
          },
          prop: "drainage_fee",
        },

        {
          label: "账户余额",
          add: {
            type: "input",
          },
          prop: "product_balance",
        },

        {
          label: "返佣金额",
          width: 200,
          add: {
            type: "input",
          },
          prop: "price",
        },
        {
          label: "分类",
          slot: true,
          add: {
            prop: "category",
            group: true,
            type: "select",
          },
          prop: "category_id",
        },
        {
          label: "关键字",
          slot: true,
          add: {
            prop: "keyword",
            multiple: true,
            group: true,
            type: "select",
          },
          prop: "keyword_id",
        },
        {
          label: "logo",
          slot: true,
          add: {
            type: "upload",
          },
          width: 150,
          prop: "product_img",
        },
        {
          label: "产品标签",
          add: {
            type: "input",
          },
          prop: "act_label_desc",
        },
        {
          label: "最高额度",
          add: {
            type: "input",
          },
          prop: "product_maximum",
        },
        {
          label: "返佣方式",
          add: {
            type: "input",
          },
          search: {
            type: "input",
          },
          prop: "price_type_desc",
        },
        {
          label: "最高佣金",
          add: {
            type: "input",
          },
          prop: "most_share_money",
        },
        {
          label: "通过率",
          add: {
            type: "input",
          },
          prop: "pase_rate",
        },
        {
          label: "推广要点",
          hidden: true,
          add: {
            placeholder: "请输入推广要点",
            type: "editor",
          },
          prop: "promotionNotice",
        },
        {
          label: "产品要素",
          hidden: true,
          add: {
            placeholder: "请输入产品要素",
            type: "editor",
          },
          prop: "product_elements",
        },
        {
          label: "准入要求",
          hidden: true,
          add: {
            placeholder: "请输入准入要求",
            type: "editor",
          },
          prop: "access_requirements",
        },
        {
          label: "可借款期限",
          add: {
            type: "input",
          },
          prop: "longest_date",
        },
        {
          label: "产品描述",
          add: {
            type: "input",
          },
          prop: "product_desc",
        },
        {
          label: "短链接",
          add: {
            type: "input",
          },
          prop: "jump_url",
        },
        {
          label: "排序",
          add: {
            type: "input",
          },
          prop: "sort",
        },
        {
          label: "海报",
          add: {
            type: "upload",
          },
          slot: true,
          width: 150,
          prop: "poster_img",
        },
        {
          label: "操作",
          // operate: true,
          width: 250,
          slot: true,
          prop: "operate",
        },
      ],
    };
  },
  mounted() {
    this.$refs.tableComp.getList();
    selectCategoryParents().then((res) => {
      this.selectMap["category"] = res;
    });
  },
  methods: {
    addFormOk({ form, done }) {
      let params = {
        ...form,
        keyword_id: form.keyword_id.join(","),
      };
      updateProduct(params).then((res) => {
        done();
        this.$refs.tableComp.getList();
      });
    },
    removeProduct(row) {
      this.$confirm("您确定要删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        delProduct({
          product_id: row.product_id,
        }).then((res) => {
          this.$refs.tableComp.getList();
        });
      });
    },
    beforeUpdate(row) {
      this.$refs.tableComp.update(row);
    },
    changeSelect({ value, item }) {
      if (item.prop == "category_id") {
        selectCategoryId({ id: value }).then((res) => {
          res.forEach((item) => {
            item.id = item.id + "";
            item.children.forEach((data) => {
              data.id = data.id + "";
            });
          });
          this.selectMap["keyword"] = res;
        });
      }
    },
    getCategoryName(category_name) {
      return category_name.join(",");
    },
    getList({ flag, params }) {
      if (!flag) {
        this.tableData = [];
      }
      productList(params).then((res) => {
        this.tableData = res.data || [];
        this.total = res.total;
      });
    },
    updateStatus(row) {
      this.$confirm(
        "您确定要" + (row.status === 1 ? "下架" : "上架") + "吗?",
        "删除",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }
      ).then(() => {
        statusPrduct({
          product_id: row.product_id,
          status: row.status === 1 ? 2 : 1,
        }).then((res) => {
          this.$refs.tableComp.getList();
        });
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === "supplierView") {
      next((vm) => {
        vm.getList();
      });
    } else {
      next();
    }
  },
};
</script>

<style lang="scss" scoped>
</style>
